<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for和v-bind的练习使用</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.active{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p v-for="(m,item) in movies" v-bind:class="{active:index == item}"
			 @click="liClick(item)">{{item}}--{{m}}</p>
			<!-- 动态绑定style(对象语法) -->
			<h1 v-bind:class="{active:isActive}" v-bind:style="{fontSize:finsalSize,backgroundColor:finalColor}">{{message}}</h1>
			<p v-bind:style="[baseStyle,baseStyle1]">{{mes}}</p><!-- 数组语法  v-vind绑定 -->
			<h1>总价:{{totalPrice}}</h1>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					movies:['超越','泰坦尼克号','放牛班的春天','火影忍者'],
					isActive:true,
					message:'xx',
					mes:'谢应鹏',
					finsalSize:'100px',
					finalColor:'blue',
					index : 0 ,
					baseStyle:{backgroundColor:'blue'},
					baseStyle1:{fontSize:'100px'},
					books:[
						{id:110,name:'Unix',price:119},
						{id:111,name:'代码大全',price:109},
						{id:112,name:'计算机组成原理',price:112},
						{id:113,name:'操作系统',price:132},
					]
				},
				computed:{//计算属性
					totalPrice:function(){
						let reselt = 0 ;
						for(let i = 0 ; i < this.books.length;i++){
							reselt += this.books[i].price ;
						}
						return reselt;
					}
				},
				methods:{
					
					liClick(item){
						this.index = item
					}
				}
				
			});
		</script>
	</body>
</html>
